// Animation
@mixin scale($scaleX, $scaleY) {
  -webkit-transform: scale($scaleX, $scaleY);
  transform: scale($scaleX, $scaleY);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  transform: translate($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  transform: rotate($degrees);
}
@mixin transform-origin($x, $y) {
  -webkit-transform-origin: #{$x $y};
  transform-origin: #{$x $y};
}

// Transitions
@mixin transition($transition...) {
  -webkit-transition: $transition;
  transition: $transition;
}
@mixin transition-property($transition-property...) {
  -webkit-transition-property: $transition-property;
  transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
  transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
  transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
  transition-timing-function: $timing-function;
}
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
  transition: transform $transition;
}

@mixin keyframes($name){
  @keyframes #{$name} {
    @content;
  }
  @-webkit-keyframes #{$name} {
    @content;
  }
}
